<template>
  <div class="p20">
    <div class="p20">
      <!-- 确认框 -->
      <el-button type="primary" @click="confirmBlue">确认框</el-button>
      <el-button type="primary" @click="confirmRed">确认框-删除-红色按钮</el-button>
    </div>
    <div class="p20">
      <!-- 导入 -->
      <el-button type="primary" @click="importWin.show = true">导 入</el-button>
      <Import :win="importWin" api="/xxx/xxx" :data="{}" :fileSize="5" template="/xxx/xxx" />
    </div>
    <div class="p20">
      <!-- 图片预览 -->
      <el-button type="primary" @click="preview">查看图片</el-button>
      <PreviewImage :win="previewImageWin" />
    </div>
    <div class="p20">
      <!-- 表单弹框 -->
      <el-button type="primary" @click="formWin1.show = true">表单1列</el-button>
      <el-button type="primary" @click="formWin2.show = true">表单2列</el-button>
      <el-button type="primary" @click="formWin3.show = true">表单3列 + 表格表单</el-button>
      <el-button type="primary" @click="formWin4.show = true">表单4列 + 表格表单</el-button>
      <Form400 @callback="() => {}" :params="formWin1" />
      <Form515 @callback="() => {}" :params="formWin2" />
      <Form760 @callback="() => {}" :params="formWin3" />
      <Form1000 @callback="() => {}" :params="formWin4" />
    </div>
    <div class="p20">
      <!-- 详情弹框 -->
      <el-button type="primary" @click="detailWin1.show = true">详情1列</el-button>
      <el-button type="primary" @click="detailWin2.show = true">详情2列</el-button>
      <el-button type="primary" @click="detailWin3.show = true">详情3列 + 表格</el-button>
      <el-button type="primary" @click="detailWin4.show = true">详情3列 + 表格</el-button>
      <Detail400 @callback="() => {}" :params="detailWin1" />
      <Detail680 @callback="() => {}" :params="detailWin2" />
      <Detail1000 @callback="() => {}" :params="detailWin3" />
      <Detail1320 @callback="() => {}" :params="detailWin4" />
    </div>
  </div>
</template>

<script>
import { confirm } from '@/components/dialog/popout'
import Import from '@/components/dialog/import'
import PreviewImage from '@/components/dialog/preview-image'
import Form400 from './form400'
import Form515 from './form515'
import Form760 from './form760'
import Form1000 from './form1000'
import Detail400 from './detail400'
import Detail680 from './detail680'
import Detail1000 from './detail1000'
import Detail1320 from './detail1320'

export default {
  components: {
    Import,
    PreviewImage,
    Form400,
    Form515,
    Form760,
    Form1000,
    Detail400,
    Detail680,
    Detail1000,
    Detail1320
  },
  data() {
    return {
      importWin: {
        show: false
      },
      formWin1: {
        show: false,
        data: null
      },
      formWin2: {
        show: false,
        data: null
      },
      formWin3: {
        show: false,
        data: null
      },
      formWin4: {
        show: false,
        data: null
      },
      detailWin1: {
        show: false,
        data: null
      },
      detailWin2: {
        show: false,
        data: null
      },
      detailWin3: {
        show: false,
        data: null
      },
      detailWin4: {
        show: false,
        data: null
      },
      // 预览图片弹框
      previewImageWin: {
        show: false,
        url: ''
      }
    }
  },
  methods: {
    /**
     * 确认框
     */
    confirmBlue() {
      confirm('弹框内容').then(() => {
        // 确认执行的代码
      }).catch(() => {})
    },
    /**
     * 确认框，红色按钮
     */
    confirmRed() {
      confirm(this.$t('message.The deletion is unrecoverable Do you want to delete it'), null, true).then(() => {
        // 确认执行的代码
      }).catch(() => {})
    },
    /**
     * 图片预览
     */
    preview() {
      this.previewImageWin.show = true
      this.previewImageWin.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20141029%2Fchangluqiuye_3346993.jpg'
    }
  }
}
</script>
